<template>
  <el-dialog
    :style="`--dialog-height: ${height}`"
    :top="top"
    :title="title"
    :width="width"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    @open="$emit('open')"
    @opened="$emit('opened')"
    @close="$emit('close')"
    @closed="$emit('closed')"
  >
    <div class="w-full h-full px-4" :class="{ 'scroll-y': bodyScrollY }">
      <slot></slot>
    </div>
    <div
      class="flex items-center justify-center"
      v-if="footerButtonVisible"
      slot="footer"
    >
      <el-button
        v-for="i in button"
        :type="i.type"
        :key="i.name"
        @click="onClickFooterButton(i.name)"
      >
        {{ i.name }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "TDialog",
  props: {
    top: {
      type: String,
      default: "5vh",
    },
    width: {
      type: String,
      default: "600px",
    },
    height: {
      type: String,
      default: "500px",
    },
    title: {
      type: String,
      required: true,
    },
    visible: {
      type: Boolean,
      required: true,
    },
    bodyScrollY: {
      type: Boolean,
      default: false,
    },
    button: {
      type: Array,
      default: () => [{ name: "取消" }, { type: "primary", name: "确定" }],
    },
  },
  computed: {
    footerButtonVisible({ button }) {
      return button.length !== 0;
    },
  },
  methods: {
    //点击底部按钮
    onClickFooterButton(name) {
      this.$emit("onClickFooterButton", name);
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll-y {
  @apply h-full overflow-y-auto;
}

.el-dialog__wrapper {
  &::v-deep .el-dialog {
    min-height: 300px;
    height: var(--dialog-height);
    max-height: 80vh;
    .el-dialog__header {
      @apply px-4 py-4;
    }
    .el-dialog__body {
      height: calc(100% - 56px - 64px);
      padding: 0;
    }
    .el-dialog__footer {
      @apply px-4 py-4;
    }
  }
}
</style>